<template>
	<view>
		<view class="headBox">
			<text class="wzText">个人</text> 
		</view>
		<view class="conbox">
			<view class="box1">
				<view class="head-img" @click="toInfo">
					<image v-if="userDataInfo.avatar" :src="path+userDataInfo.avatar"></image>
					<image class="user-headImg" v-else
						src="https://ceres.zkthink.com/static/img/user/morentouxiang.png">
					</image>
					<view class="userName">{{userDataInfo.realName||'未登录'}}</view>
					<view class="phone" >{{userDataInfo.userName||'电话号码'}}</view>
				</view>
				<view class="orderbox1">
					<text class="leftText"></text>
					<text>订单管理</text>
					<text class="rightText" @click="toOrderList()">更多订单></text>
				</view>
				<view class="orderbox2" @click="toOrderList()">
					<view class="itemOrder-icon">
						<image class="order-icon" src="../../static/images/order-icon1.png"></image>
						<text>待付款</text>
					</view>
					<view class="itemOrder-icon">
						<image class="order-icon" src="../../static/images/order-icon2.png"></image>
						<text>待发货</text>
					</view>
					<view class="itemOrder-icon">
						<image class="order-icon" src="../../static/images/order-icon3.png"></image>
						<text>待收货</text>
					</view>
					<view class="itemOrder-icon">
						<image class="order-icon" src="../../static/images/order-icon4.png"></image>
						<text>已完成</text>
					</view>
					 
				</view>
			</view>
			<view class="box2">
				<view class="box2Itembox" v-for="(item,index) in list" :key="index" @click="toDetails(item)">
					<view class="icon-item">
						<image class="icon" :src="item.icon" mode=""></image>
					</view>
					<view class="title1">{{item.title}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		 
		data() {
			return {
				path: this.$http.tpUrl + '/', // 图片前缀
				userInfo:{}, // 个人信息
				list:[
					{
						title:'我的账户',
						path:'/pages_category_page1/mine/myAccount',
						icon:'/static/images/mine-icon1.png'
					},
					{
						title:'我的订单',
						path:'/pages/order/orderList',
						icon:'/static/images/mine-icon5.png'
					},
					{
						title:'我的卡券',
						path:'/pages_category_page1/mine/coupon',
						icon:'/static/images/mine-icon4.png'
					},
					{
						title:'地址管理',
						path:'/pages_category_page1/mine/address',
						icon:'/static/images/mine-icon3.png'
					},
					{
						title:'用户协议',
						path:'/pages_category_page1/mine/userAgreement',
						icon:'/static/images/mine-icon7.png'
					},
					{
						title:'关于我们',
						path:'/pages_category_page1/mine/aboutUs',
						icon:'/static/images/mine-icon8.png'
					},
					{
						title:'联系我们',
						path:'/pages_category_page1/mine/contactUs',
						icon:'/static/images/mine-icon6.png'
					},
					// {
					// 	title:'评论测试',
					// 	path:'/pages_category_page1/mine/postEvaluate',
					// 	icon:'/static/images/mine-icon6.png'
					// },
					{
						title:'我的项目',
						path:'/pages_category_page1/mine/myProject',
						icon:'/static/images/mine-icon6.png'
					},
				], // 列表
				userDataInfo:{}, // 
				
			}
		},
		onLoad() {
	
		},
		onShow() {
			 let userInfo = wx.getStorageSync(userInfo)
			 if(userInfo){
				 userInfo=JSON.parse(userInfo)
				 this.userInfo = userInfo
			 }
			 this.userData()
			// this.initData()
		},
		onReachBottom() {
			// 触底分页
			console.log('触底')
			// if (this.total > this.list.length) {
			// 	this.page = parseInt(this.page) + 1
			// }
		},
		methods: {
			// 去头像信息
			toInfo(){
				uni.navigateTo({
					url: `/pages_category_page1/mine/userInfo`
				})
			},
			toDetails(item){
				if(item.title=='我的订单'){
					uni.switchTab({
						url: item.path
					})
					return
				}
				uni.navigateTo({
					url: item.path
				})
			},
			// 个人信息
			userData() {
				let _this = this;
				let userId = uni.getStorageSync('id')
				_this.$http.fetchData({
					url: '/wechatApplet/customer/user/'+userId,
					method: 'GET',
					data: {
						
					},
					success(res) {
						// uni.showToast({
						// 	title: res.message,
						// 	icon: 'none'
						// });
						_this.userDataInfo = res.data
						console.log(res)
					 
					}
				})
			},
			// 查看详情
			getItem(item) {
				console.log(item.id)
				let id = item.id
				let paramsStr = `?biaoduan_id=${id}&biaoduanTotal=${this.total}`
				uni.navigateTo({
					url: `/pages_category_page1/procedureList/procedureList${paramsStr}`
				})
			},
			// 去订单
			toOrderList(){
				console.log('111111111')
				uni.switchTab({
					url: `/pages/order/orderList`
				})
			},
			 
	
		}
	}
</script>

<style scoped>
	
	.headBox {
		font-size: 36rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		font-weight: 700;
		text-align: center;
		color: #232323;
		padding-top: 88rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-bottom: 112rpx;
		background: linear-gradient(89deg,#f9d7a6 1%, #ffdc95 100%);
	}
	.headBox .wzText {
		line-height: 56rpx;
	}
	.conbox {
		padding: 0 30rpx;
		margin-top: -90rpx;
	}
	.box1 {
		background: #ffffff;
		border-radius: 10rpx;
		box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(93,69,41,0.25); 
		padding: 40rpx 30rpx;
	}
	.head-img {
		padding-left: 106rpx;
		position: relative;
	}
	.head-img image {
		width: 84rpx;
		height: 84rpx;
		border-radius: 50%;
		position: absolute;
		top: 0;
		left: 0;
		background: #999;
	}
	.userName {
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		font-weight: 700;
		color: #5d4529;
	}
	.phone {
		font-size: 24rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #5d4529;
		margin-top: 11rpx;
	}
	.orderbox1 {
		position: relative;
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		font-weight: 700;
		color: #e47917;
		margin-top: 48rpx;
	}
	.orderbox1 .leftText {
		display: inline-block;
		width: 8rpx;
		height: 36rpx;
		background: #e47917;
		border-radius: 4rpx;
		vertical-align: text-bottom;
		margin-right: 15rpx;
	}
	.orderbox1 .rightText {
		line-height: 38rpx;
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #e47917;
		position: absolute;
		right: 0;
		top: 50%;
		margin-top: -19rpx;
	}
	.orderbox2 {
		display: flex;
		margin-top: 43rpx;
	}
	.itemOrder-icon {
		flex: 1;
		text-align: center;
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #5d4529;
	}
	.order-icon {
		width:64rpx;
		height: 59rpx;
		display: block;
		margin: 0 auto;
		margin-bottom: 24rpx;
	}
	.box2 {
		padding-top: 30rpx;
		padding-bottom: 80rpx;
	}
	.box2 .box2Itembox {
		width: 334rpx;
		display: inline-block;
		background: #ffffff;
		border-radius: 10rpx;
		box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(93,69,41,0.25);
		padding: 34rpx;
		padding-top: 30rpx;
		box-sizing: border-box;
		margin-bottom: 26rpx;
	}
	.box2 .box2Itembox:nth-child(2n+1) {
		margin-right: 21rpx;
	}
	.box2Itembox .icon-item {
		width: 80rpx;
		height: 80rpx;
		/* background: #fffbf3; */
		/* border-radius: 50%;
		box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(0,0,0,0.16); */
		margin-bottom: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.box2Itembox .icon-item image {
		width: 80rpx;
		height: 80rpx;
	}
	.box2Itembox .icon-item .icon {
		/* width: 26rpx;
		height: 28rpx;
		background: #e47917;
		box-sizing: border-box; */
	}
	.box2 .box2Itembox .title1 {
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #5d4529;
	}
</style>